<template>
  <el-dialog :title="title" :width="width" :visible.sync="isShowVisible" center :close-on-click-modal="false" :before-close="() => $emit('notRefresh')">
    <el-card>
      <el-form label-width="105px" :model="groupData" ref="groupData" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类名称:" prop="fname" id="fname">
              <el-input v-model="groupData.fname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类编码:" prop="fnumber" id="fnumber">
              <el-input v-model="groupData.fnumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="上级分类:" prop="fparentid" id="fparentid">
          <el-select v-model="groupData.fparentid" :disabled="groupId!=0" filterable placeholder="请选择">
            <el-option v-for="item in groupList" :key="item.nodeId+''" :label="item.nodeName" :value="item.nodeId+''">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveGroup">保存</el-button>
      <el-button @click="$emit('notRefresh')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import MaterialGroupApi from '@/api/material/MaterialGroupApi'
export default {
  name: 'materialGroup_addEdit',
  props: {
    width: { type: String, default: '40vw' },
    groupId: null,
    parentId: null,
  },
  data () {
    const validateParentId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择上级分类'))
      } else {
        callback()
      }
    };
    return {
      title: '新增分类',
      isShowVisible: true,
      rules: {
        fname: [{ required: true, message: '请填写分类名称', tirgger: 'blur' }],
        fnumber: [{ required: true, message: '请填写分类编码', tirgger: 'blur' }],
        fparentid: [{ required: true, validator: validateParentId, tirgger: 'change' }],
      },
      groupData: {},
      groupList: [],
      isLoading: false,
    }
  },
  async created () {
    this.isLoading = true
    let http = new MaterialGroupApi()
    let groupList = await http.queryGroupTree({})
    this.groupList = groupList.data
    if (this.parentId) {
      let groupData = {}
      groupData.fparentid = this.parentId + ""
      this.groupData = groupData
    } else {
      if (this.groupId) {
        this.title = '编辑分类'
        let groupData = await http.detail({ fid: this.groupId })
        this.groupData = groupData.data
        this.isLoading = false
      } else {
        this.isLoading = false
      }
    }

  },
  methods: {
    saveGroup () {
      this.$refs['groupData'].validate((valid, object) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请耐心等待.....',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          let http = new MaterialGroupApi()
          //若有groupId证明时编辑没有则时新增
          if (this.groupId) {
            http.update(this.groupData).then(res => {
              loading.close()
              this.$tie.showSuccess(res.message)
              this.$emit('close')
            }).catch(e => {
              loading.close()
            })
          } else {
            http.add(this.groupData).then(res => {
              loading.close()
              this.$tie.showSuccess(res.message)
              this.$emit('close')
            }).catch(e => {
              loading.close()
            })
          }
        } else {
          let validArr = []
          Object.keys(object).forEach(function (key) {
            validArr.push(key)
          });
          let validVal = "#" + validArr[0];
          document.querySelector(validVal).scrollIntoView(true);
        }
      })
    },
  },
}
</script>

<style scoped>
</style>
